<template>
  <div class="Singer-list">
    <div class="Singer-header">
      <div class="Singer">
        <span class="w-60">语种：</span>
        <el-radio-group v-model="queryInfo.area"
                        size="mini"
                        fill="#FEF5F5"
                        text-color="#ec4141">
          <el-radio-button v-for="(item) in artistData.area"
                           :key="item.id"
                           :label="item.id">{{item.value}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="Singer">
        <span class="w-60">分类：</span>
        <el-radio-group v-model="queryInfo.type"
                        size="mini"
                        fill="#FEF5F5"
                        text-color="#ec4141">
          <el-radio-button v-for="(sort) in artistData.type"
                           :key="sort.id"
                           :label="sort.id">{{sort.value}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="Singer">
        <span class="w-60">筛选：</span>
        <el-radio-group v-model="queryInfo.initial"
                        size="mini"
                        fill="#FEF5F5"
                        text-color="#ec4141">
          <el-radio-button v-for="(initial) in artistData.initial"
                           :key="initial.id"
                           :label="initial.id">{{initial.value}}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="Singer-img mtop-20">
      <ul>
        <li v-for="item in Singer"
            :key="item.id"
            class="mright-20"
            @click="toPath(item.id)">
          <img v-lazy="item.picUrl"
               :key="item.picUrl">
          <p class="mbuttom-15 mtop-10 fs-14 ccc">{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getArtistList } from "@/api/artist"
const artistData = require('@/assets/json/artistData')
export default {
  data () {
    return {
      queryInfo: {
        //查询信息
        limit: 30,
        area: -1,
        offset: 0,
        type: -1,
        initial: '-1'
      },
      artistData,
      Singer: []//歌手信息
    }
  },
  mounted () {
    this.getArtistList()
  },
  methods: {
    async getArtistList () {
      let res = await getArtistList(this.queryInfo)
      if (res.code !== 200) return
      this.Singer = res.artists
    },
    // 去歌手详情
    toPath (id) {
      this.$router.push({ path: '/singerdetail', query: { id } })
    },
  },
  watch: {
    queryInfo: {
      deep: true,
      handler () {
        this.getArtistList()
      }
    }
  },
}
</script>

<style scoped lang="less">
.Singer-header {
  line-height: 20px;
  margin-top: 10px;
  margin-left: 100px;
  font-size: 13px;
  .Singer {
    margin-top: 20px;
    width: 1000px;
    height: auto;
    span {
      float: left;
      height: 30px;
      line-height: 30px;
    }
    .el-radio-group {
      margin-left: 80px;
      height: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /deep/.el-radio-button__inner {
        border-radius: 15px;
        border: none;
        &:hover {
          color: #ec4141;
        }
      }
      .el-radio-button {
        width: 60px;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
      }
    }
  }
}
.Singer-img {
  width: 1080px;
  margin-left: 100px;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      img {
        width: 160px;
        height: 160px;
        border-radius: 8px;
      }
    }
  }
}
</style>